<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设计模式</title>
</head>

<body>
  <h2>迭代器模式</h2>
  <script>
    // ------------- 迭代协议 -------------
    /**
     * 迭代协议可以定制对象的迭代行为  分为2个协议:
     *  1. 可迭代协议: 增加方法[Symbol.iterator](){} 返回符合 迭代器协议 的对象
     *  2. 迭代器协议: 
     *      有next方法的对象,next方法返回:
     *        已结束: {done:true}
     *        继续迭代: {done:false,value:'x'}
     *    使用Generator
     *    自己实现 对象,next
     * */
    const obj = {
      // Symbol.iterator 内置的常量
      // [属性名表达式]
      [Symbol.iterator]() {

        // ------------- 自己实现 -------------
        const arr = ['北京', '上海', '广州', '深圳']
        let index = 0

        return {
          next() {
            if (index < arr.length) {
              // 可以继续迭代
              return { done: false, value: arr[index++] }
            }
            // 迭代完毕
            return { done: true }
          }
        }


        // ------------- 使用Generator -------------
        // function* foodGenerator() {
        //   yield '西兰花'
        //   yield '花菜'
        //   yield '西兰花炒蛋'
        // }
        // const food = foodGenerator()
        // return food
      }
    }

    for (const iterator of obj) {
      console.log('iterator:', iterator)
    }

  </script>
</body>

</html>